<template>
    <div>
        <div id="title">
            <div @click="fasong" class="title-item">我发出的</div>
            <div @click="shoudao" class="title-item">我收到的</div>
        </div>
        <div class="contan">
            <div>
                <!-- <div class="header">
                    <img src="../../static/logo.png" alt="">
                </div>
                <p class="nichen">昵称</p> -->
                <view class="amountBg">
                    <view class="logo">
                        <open-data type="userAvatarUrl" class="userinfo" id="userinfo"></open-data>
                    </view>
                    <view class="account">
                        <open-data type="userNickName" lang="zh_CN">
                        </open-data>
                    </view>
                </view>
            </div>
            <div class="contan-jilu clear">
                <div class="jilu">
                    <p>{{zhufutext}}</p>
                    <p>{{zhufucount}}</p>
                </div>
                <div class="geli"></div>
                <div class="jilu">
                    <p>{{hongbaotext}}</p>
                    <p>{{hongbaocount}}</p>
                </div>
            </div>
        </div>
        <div class="foot">
            <div v-for="(item,index) in zhufu" :key="index">
                <img src="../../static/heka1.png" alt="">
                <div class="foot-text">
                    <p>{{item.zhufuyu}}</p>
                    <p>时间:{{item.Time}}</p>
                    <p>{{state}}:{{item.Num}}个</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        data() {
            return {
                /* 文字渲染 */
                zhufutext: '',
                hongbaotext: '',
                // 总数量
                zhufucount: '',
                hongbaocount: '',
                state: '', //收到或者发出
                /* 卡片部分 */
                zhufu: []
            }
        },
        onLoad() {
            this.fasong()
        },
        methods: {
            // 点击事件
            fasong() {
                this.sendallshoudao()
                this.fazhufu()
            },
            shoudao() {
                this.getallshoudao()
                this.shouzhufu()
            },
            /* 收到祝福的总数量 */
            getallshoudao() {
                uni.request({
                    url: api.GET_SHOUDAOALL,
                    method: 'get',
                    params: {},
                    success: (res) => {
                        this.zhufutext = "收到祝福（条）"
                        this.hongbaotext = "收到红包（元）"
                        this.zhufucount = res.data.data.zongnum
                        this.hongbaocount = res.data.data.zonghongbao
                    }
                });
            },
            /* 发送 */
            sendallshoudao() {
                uni.request({
                    url: api.GET_FACHUALL,
                    method: 'get',
                    params: {},
                    success: (res) => {
                        this.zhufutext = "送出祝福（条）"
                        this.hongbaotext = "送出红包（元）"
                        this.zhufucount = res.data.data.zongnum
                        this.hongbaocount = res.data.data.zonghongbao
                    }
                });
            },
            fazhufu() {
                uni.request({
                    url: api.GET_FAZHUFU,
                    method: 'get',
                    params: {},
                    success: (res) => {
                        this.state = '发出'
                        this.zhufu = res.data.data
                    }
                });
            },
            shouzhufu() {
                uni.request({
                    url: api.GET_SHOUZHUFU,
                    method: 'get',
                    params: {},
                    success: (res) => {
                        this.state = "收到"
                        this.zhufu = res.data.data
                    }
                });
            },
        }
    }
</script>

<style>
    #userinfo {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        display: flex;
        overflow: hidden;
        text-align: center;
    }

    .clear::after {
        content: '';
        display: block;
        clear: both;
        visibility: hidden;
    }

    .foot {
        padding: 80rpx 0;
        background-color: #F4F4F4;
    }

    .foot>div {
        padding: 40rpx 20rpx;
        width: 650rpx;
        margin: 30rpx auto;
        height: 148rpx;
        background: #FFFFFF;

    }

    .foot>div img {
        width: 150rpx;
        height: 150rpx;
        float: left;
    }

    .foot .foot-text {
        width: 480rpx;
        height: 150rpx;
        float: right;
        /* border: 1px solid red; */
    }

    .foot .foot-text p {
        color: #333333;
        font-size: 28rpx;
    }

    .foot .foot-text p:first-child {
        font-size: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /*  //设置行数，1超出一行...，2超出两行...*/
        -webkit-box-orient: vertical;
    }

    .foot .foot-text p:nth-child(2) {
        margin: 20rpx 0 10rpx 0;
    }

    /* 中间部分 */
    .contan {
        position: relative;
        padding-top: 50rpx;
        height: 400rpx;
        background: linear-gradient(0deg, #F48FB1 0%, #FEECBB 100%);
    }

    .contan .header {
        width: 140rpx;
        height: 140rpx;
        background: #F4F4F4;
        border: 4rpx solid #F7CDC4;
        border-radius: 50%;
        overflow: hidden;
    }

    .contan .nichen {
        font-size: 32rpx;
        margin: 24rpx 0;
        color: #fff;
    }

    .contan>div:first-child {
        width: 140rpx;
        margin: auto;
        text-align: center;
    }

    .contan-jilu {
        box-sizing: border-box;
        width: 690rpx;
        height: 200rpx;
        padding: 50rpx 40rpx;
        background: #FFFFFF;
        box-shadow: 0px 0px 16px 0px rgba(244, 143, 177, 0.9);
        border-radius: 20rpx;
        position: absolute;
        top: 306rpx;
        left: 30rpx;
    }

    .contan-jilu div {
        float: left;
    }

    .contan-jilu .jilu {
        text-align: center;
        width: 49%;
    }

    .contan-jilu .jilu p:nth-child(1) {
        color: #333333;
        font-size: 32rpx;
    }

    .contan-jilu .jilu p:nth-child(2) {
        margin-top: 28rpx;
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
    }

    .contan-jilu .geli {
        width: 2px;
        height: 120rpx;
        background: #D7D6D6;

    }

    /* 标题 */
    #title {
        height: 96rpx;
        display: flex;
        /* border: 1px solid red; */
        justify-content: space-between;
    }

    #title>.title-item {
        width: 50%;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 96rpx;
        text-align: center;
        cursor: pointer;
    }

    #title>.title-item:hover {
        color: #F48FB1;
        border-bottom: 2px solid #F48FB1;
    }
</style>